<!doctype html>
<html>
	<head>
		<title>Background attribute tests</title>
		<script type="text/javascript" src="../../test.js"></script>

		<style>
			body {
				background-color: blanchedalmond;
			}

			div {
				display: inline-block;
				width: 100px;
				height: 100px;
				padding: 10px;
				border: 15px solid black;
			}
		</style>
	</head>
	<body>
		<div style="background: -webkit-linear-gradient(90deg, blue, red);"></div>
		<div style="background: linear-gradient(90deg, blue, red);"></div>
		<div style="background: linear-gradient(45deg, blue, red);"></div>
		<div style="background: linear-gradient(45deg, blue, red); width:200px;"></div>
		<div style="background-image: linear-gradient(45deg, blue, red); background-position: 20px 30px; background-size: 60px; background-repeat: no-repeat"></div>
		<div style="background-image: linear-gradient(45deg, blue, red); background-position: 20px 30px; background-size: 60px;"></div>
		<div style="background-image: linear-gradient(45deg, blue, red);padding:0"></div>
		<div style="background: linear-gradient(red, red 60%, blue);"></div>
		<div style="background: linear-gradient(90deg, red 60%, blue);"></div>
		<div style="background: linear-gradient(135deg, red, red 60%, blue);"></div>
		<div style="background: linear-gradient(to right, red, red 60%, blue);"></div>
		<div style="background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);"></div>
		<div style="background: linear-gradient(60deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%);"></div>
		<div style="background: linear-gradient(45deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: content-box"></div>
		<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: padding-box"></div>
		<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: border-box"></div>
		<div style="background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); "></div>
		<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%) content-box;"></div>
		<div style="background: linear-gradient(60deg, hsla(120,80%,50%,0.8) 0%, transparent 50%, rgba(255,100,100,0.5) 100%);"></div>
	</body>
</html>